import React, {useEffect, useMemo, useState} from 'react';
import s from "./cys.module.less"
import {Button, Form, Input, Radio, Result, Space, TextArea} from "antd-mobile";
import UploadBanner from "@/cms/UploadBanner";
import { message} from "antd";
import {useNavigate} from "react-router-dom";
import useOpenid from "@/pages/wx/use/useOpenid";
function Index(props) {
    const [form] = Form.useForm();
    const [status, setStatus] = useState(-1),
        {openid} = useOpenid();

    const navigate = useNavigate();

    const checkMobile = (_, value) => {
        const pattern = /^1[3-9]\d{9}$/;
        if (pattern.test(value) || value === "") {
            return Promise.resolve()
        }
        return Promise.reject(new Error('请输入正确的手机号!'))
    }

    function onFinish(values) {
        const params = {
            ...values,
            age: values.age * 1,
            avatar: values.avatar.map(item => ({url: item.url || item.response.message})),
            idCard: values.idCard.map(item => ({url: item.url || item.response.message})),
            certificate:values.certificate.map(item => ({url: item.url || item.response.message})),
            openid
        }
        if(isNaN(values.price)){
            message.error("请输入正确的价格！");
            return;
        }else{
            params.price = +params.price;
        }
        ax.post("/app/teaerRegister", params).then(res => {
            message.success(res.msg);
            getStatus()
        })
    }

    useEffect(() => {
        if (openid){
            getStatus()
        }
    }, [openid])

    function getStatus() {
        ax.get("/app/teaerRegStatus", {
            params: {
                openid
            }
        }).then(res => {
            setStatus(res.data.status)
        })
    }

    const page = useMemo(() => {
        if (status === 0) {
            return <Result
                status='waiting'
                title='审核中'
                description='审核中, 审核周期约24小时！'
            />
        }
            return <Form
                layout='vertical'
                form={form}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        立即申请
                    </Button>
                }
                onFinish={onFinish}
            >
                <Form.Header>申请成为茶艺师</Form.Header>
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{required: true, message: '姓名不能为空'}]}
                >
                    <Input placeholder='请输入姓名'/>
                </Form.Item>
                <Form.Item
                    name='phone'
                    label='手机号'
                    rules={[{required: true}, {validator: checkMobile}]}
                >
                    <Input placeholder='请输入姓名'/>
                </Form.Item>
                <Form.Item name='gender' label='性别' required>
                    <Radio.Group defaultValue='1'>
                        <Space direction='vertical'>
                            <Radio value='男'>男</Radio>
                            <Radio value='女'>女</Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label='年龄' name='age'>
                    <Input placeholder='请输入年龄' clearable type={"number"}/>
                </Form.Item>
                <Form.Item label='身份证号' name='idNum' required>
                    <Input placeholder='请输入身份证号' clearable/>
                </Form.Item>
                <Form.Item
                    name='address'
                    label='地址' help='详情地址'
                    rules={[{required: true, message: '地址不能为空'}]}
                >
                    <TextArea
                        placeholder='请输入地址'
                        maxLength={100}
                        rows={2}
                        showCount
                        clearable
                    />
                </Form.Item>
                <Form.Item
                    label={"身份证照片"}
                    name={"idCard"}
                    rules={[{required: true, message: '请上传身份证正反面'}]}
                >
                    <UploadBanner/>
                </Form.Item>
                <Form.Item
                    label={"职业资格证照片"}
                    name={"certificate"}
                    rules={[{required: true, message: '请上传职业资格证照片'}]}
                >
                    <UploadBanner/>
                </Form.Item>
                <Form.Item
                    label={"个人照片"}
                    name={"avatar"}
                    rules={[{required: true, message: '请上传个人照片'}]}
                >
                    <UploadBanner/>
                </Form.Item>
                <Form.Item label='服务费' name='price'>
                    <Input placeholder='请输入每小时的服务费' clearable type={"number"} min={1}/>
                </Form.Item>
                <Form.Item
                    name='desc'
                    label='个人介绍'
                    rules={[{required: true, message: '个人介绍不能为空'}]}
                >
                    <TextArea
                        placeholder='如：大家好，我是您的茶艺师小雅。自幼深受茶文化熏陶，我深爱这片树叶所承载的千年底蕴与人文情感。从事茶艺工作多年，我精研六大茶类，熟知各类茶叶冲泡技法，并致力于将传统茶道艺术与现代生活美学相结合。在茶的世界里，我用心感知每一片茶叶的生命力，力求为每一位客人呈现一杯色香味俱佳的好茶，让您在品茗之间尽享生活的宁静与淡然之美。同时，我也热衷于传播茶知识，期待与您共享茶之韵味，共悟茶之道。'
                        maxLength={300}
                        rows={5}
                        showCount
                    />
                </Form.Item>
            </Form>
    }, [status, form, onFinish])
    return (
        <div className={s.wrap}>
            {
                page
            }
        </div>
    );
}

export default Index;